import react, { PureComponent } from 'react'
import { Modal, Icon, Upload, Button, Card } from 'antd'
import styles from './upload.less'

export default class MUpload extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      visible: true,
      loading: true,
      currTabKey: 'interactive',
    }
  }

  Interactive = () => (
    <div className={styles['interactive-video']}>
      <p className={styles['tips']}>互动视频可以在视频中加入宝贝等互动玩法哦~ 请选择已编辑的互动视频</p>
      {this.creatorAddVideo('创建互动视频')}
    </div>
  )
  Normal = () => (
    <div>
      <p className={styles['interactive-video']}>请选择视频（仅显示转码完成的视频</p>
      {this.creatorAddVideo('上传普通视频')}
    </div>
  )
  creatorAddVideo = text => (
    <div>
      <label className={styles['lable']}>上传视频</label>
      <div className={styles['add-video-warp']} onClick={this.showMold}>
        <div className={styles['emtpy-warp']}>
          <div className={styles['msg']}>
            <Icon type="plus"/>
            <div className={styles['text']}> { text } </div>
          </div>
        </div>
      </div>
    </div>
  )

  render() {
    let { visible, loading, currTabKey } = this.state
    const tabListNoTitle = [{
      key: 'interactive',
      tab: '添加互动视频',
    }, {
      key: 'normal',
      tab: '添加普通视频',
    },];
    const contentListNoTitle = {
      'interactive': this.Interactive(),
      'normal': this.Normal(),
    };
    return (
      <div className={styles['video-upload-warp']}>
        <label className={styles['lable']}>上传视频</label>
        <div className={styles['add-video-warp']} onClick={this.showMold}>
          <div className={styles['emtpy-warp']}>
            <div className={styles['msg']}>
              <Icon type="plus"/>
              <div className={styles['text']}>添加视频</div>
            </div>
          </div>
        </div>

        <Modal
          title="添加视频"
          visible={visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button disabled key="edit" onClick={() => {console.log('edit')}} style={{
              border: 'none',
              background: '#fff',
            }}>再次编辑</Button>,
            <Button disabled key="back" onClick={this.handleCancel}>确定添加</Button>,
            <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
              取消
            </Button>,
          ]}
          style={{padding: 0}}
        >
         <Card
          bodyStyle= {{padding: '0 24px'}}
          bordered={false}
          style={{ width: '100%' }}
          tabList={tabListNoTitle}
          activeTabKey={currTabKey}
          onTabChange={(key) => { this.handleTabChange(key, 'currTabKey'); }}
        >
          {contentListNoTitle[currTabKey]}
        </Card>
        </Modal>

      </div>
    )
  }
  showMold = () => {
    this.setState({visible: true})
  }
  handleOk = () => {
    this.setState({visible: false})
  }
  handleCancel = () => {
    this.setState({visible: false})
  }

  handleTabChange = (key, type) => {
    this.setState({ [type]: key });
  }
}
